<template>
  <!-- {{route.query.categoryLevel}} -->

  <el-button type="primary" @click="goback" v-show="route.query.categoryLevel!=1" :icon="Edit" circle />
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
   
  >
    <el-table-column type="selection" width="55" />

    <el-table-column property="categoryName" label="分类名称" />
    <el-table-column property="categoryRank" label="排序值" />
    <el-table-column property="createTime" label="添加时间" />
    <el-table-column property="address" label="操作">
      <template #default="scope">
        <el-button size="small" type="primary">修改</el-button>
        <el-button size="small" type="success" @click="handleNext(scope.$index, scope.row)">下级分类</el-button>
        <el-button size="small" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
const multipleTableRef = ref();
const multipleSelection = ref([]);
import { onMounted, ref } from "vue";
import axios from "../../ajax";
import {Edit} from "@element-plus/icons-vue"
import {useRoute,useRouter,onBeforeRouteUpdate} from "vue-router"
const tableData = ref([]);
const route=useRoute()
const router=useRouter()
onMounted(() => {
   let {categoryLevel,parentId}=route.query
  getData(categoryLevel,parentId);
});

let getData = async (categoryLevel,parentId) => {
    // console.log("获取表格数据");
  let { list } = await axios.get("/categories", {
    params: {
      pageNumber: 1,
      pageSize: 10,
      categoryLevel,
      parentId,
    },
  });
  tableData.value = list;
};


let handleNext=(index,row)=>{

    let categoryLevel= row.categoryLevel+1
    let categoryId= row.categoryId
  
    router.push({
         path:"/index/category",
         query:{
            categoryLevel:categoryLevel,
            parentId:categoryId
         }
    })
//    getData(categoryLevel,categoryId)
}
onBeforeRouteUpdate((to,from)=>{// 路由更新 

   
    let {categoryLevel,parentId}=to.query// to就是 目标页面
    
    getData(categoryLevel,parentId);
})
let goback=()=>{
    router.go(-1)
}
</script>

<style lang="scss" scoped>
</style>